import React, { Component } from 'react';
import './match.css';

class Match extends Component {


    constructor(props){
        super(props);


        let bindQuetion = this.props.data.bind_question;
        let selection = {};
        bindQuetion.map((value, index)=>{
            selection[value.id] = '';
        });

        this.state ={
            'show':'block',
            'arrow':'icon iconfont icon-shouqi',
            'selection':selection
        }

    }

    clickHander(e){
        this.props.mark(e);
    }


    getLeft(){

        if(this.props.switch === 0){
            return 0+'px';
        }

        if(this.props.switch === 1){
            return (-this.props.width)+'px';
        }

    }

    controlDisplay(e){
        let state = this.state.show;

        if(state === 'block'){

            this.setState({
                'show':'none',
                'arrow':'icon iconfont icon-zhankai'
            });

            return;

        }


        this.setState({
            'show':'block',
            'arrow':'icon iconfont icon-shouqi'
        });


    }

    selectAnswer(e){
        let node = e.target;
        let id = node.dataset.id;

        if(id === undefined){
            return;
        }

        let selection = this.state.selection;
        selection[id] = node.dataset.value;

        this.setState({
            'selection':selection
        });

        this.props.input(e);

    }

    renderSelection(selection){
        let selections = selection.selection;
        let selectionsArray = [];

        for(let key in selections){
            selectionsArray.push([key, selection.id]);
        }

        let residue = selectionsArray.length % 5;

        for(let x=0; x<5-residue; x++){
            selectionsArray.push('');
        }


        //拆分成二维数组
        let index = 0;
        let count = 0;
        let newArray = [];
        newArray.push([]);
        selectionsArray.map((value, key)=>{
            if(count > 4){
                index ++;
                newArray.push([]);
                count = 0;
            }
            newArray[index].push(value);
            count++;
        });


        return (
            <div className="flex-column panel-match">
                {
                    newArray.map((value, key)=>{
                        return (
                            <div key={key} className="flex-cell flex-row">
                                {
                                    value.map((value2, key2)=>{
                                        return (
                                            <div data-value={value2[0]} onClick={(e)=>this.selectAnswer(e)} data-id={value2[1]} key={key2} className="flex-cell flex-row-2 flex-height-match">
                                                {value2[0]}
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        )
                    })
                }
            </div>
        )

    }

    render() {

        let left = this.getLeft();

        let bindQuetion = this.props.data.bind_question;

        return (
            <div style={{height:this.props.height}} className="question-view">
                <ul className="question-card-box" style={{width:this.props.width*2, left:left}}>
                    <li className="question-card" style={{width:this.props.width}}>
                        <div className="quesiton-wrapper">
                            <div className="question-packet">
                                <div style={{'display':this.state.show}} onClick={(e)=>this.clickHander(e)} className="setcion_explain" dangerouslySetInnerHTML={{ __html: this.props.data.section_explain }}></div>
                                <div style={{'display':this.state.show}} onClick={(e)=>this.clickHander(e)} className="explain two" dangerouslySetInnerHTML={{ __html: this.props.data.explain }}></div>
                                
                                <div className="display-button">
                                    <i onClick={(e)=>this.controlDisplay(e)} className={this.state.arrow}></i>
                                </div>
                                
                            </div>

                            <div onClick={(e)=>this.clickHander(e)} className="common_question" dangerouslySetInnerHTML={{__html: this.props.data.common_question}}></div>

                        </div> 
                    </li>

                    <li className="question-card" style={{width:this.props.width}}>
                        <ul className="match-question">

                            
                            {bindQuetion.map((value, index)=>{
                                return (
                                    <li  onClick={(e)=>this.clickHander(e)} key={index} className="answer_li">
                                        <div dangerouslySetInnerHTML={{__html:value.question}}></div>
                                        <div data-id={value.id} className="answer_select">
                                            {this.state.selection[value.id]}
                                        </div>
                                        {this.renderSelection(value)}
                                    </li>
                                )
                            })}
                            

                        </ul>
                    </li>

                </ul>
            
            </div>
        );
    }
}

export default Match;